<template>
  <van-icon 
  :color="value ? '#ffa500' : ''" 
  :name="value ? 'star' : 'star-o'" 
  @click="onCollect" 
  :loading="loading"
  />
</template>

<script>
import { addCollect,deleteCollect } from "@/api/article"
export default {
  name: 'CollectArticle',
  props:{
    value:{
      type:Boolean,
      required:true
    },
    articleId:{
      type:[Number, String, Object],
      required:true
    }
  },
  data(){
    return{
      loading:false
    }
  },
  methods:{
    async onCollect(){
      this.loading = true
    try {
      if(this.value){
        // 已收藏
        await deleteCollect(this.articleId)
      }else{
        // 没有收藏
        await addCollect(this.articleId)
      }
      // 更新视图
      this.$emit('input',!this.value)
      // 收藏成功以后的提示
      this.$toast.success(!this.value ? '收藏成功' : '取消收藏')
      } catch (err) {
        this.$toast.fail('操作失败,请重试！')
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
</style>